<template>
  <div class="o-editor">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor :style="{height: height}" style="overflow-y: hidden;"
            v-model="html"
            :defaultConfig="defaultConfig"
            :mode="mode"
            @onChange="__onChange"
            @onCreated="__onEditorCreated"/>
  </div>
</template>

<script lang="ts">
  import "@wangeditor/editor/dist/css/style.css";
  import { Component, Vue, Prop, Model, Watch } from "vue-property-decorator";
  import { Editor ,Toolbar } from '@wangeditor/editor-for-vue';
  import { IToolbarConfig, DomEditor, createToolbar, SlateEditor, SlateNode, SlateElement } from '@wangeditor/editor';
  import Module from "./src/plugins";
  Module.registerModule();


  @Component({
    name: "o-editor",
    components: {
      Toolbar,
      Editor
    }
  })
  export default class OEditor extends Vue {
    /**
     * @description 编辑器实例
     */
    private editor:any = null;

    /**
     * @description 默认值
     */
    @Prop({
      default: ""
    })
    private value?: string;

    /**
     * @description 编辑器高度，默认500px
     */
    @Prop({
      default: "500px"
    })
    private height?: string;

    /**
     * @description 编辑器模式，默认 [default]
     * 可选：[default:默认, simple:简洁]
     */
    @Prop({
      default: "default"
    })
    private mode?: string;

    private html: string = "";


    toolbarConfig: Partial<IToolbarConfig> = {
      excludeKeys: [
        'group-image' // 排除菜单组，写菜单组 key 的值即可
      ]
    };

    /**
     * @description 编辑器配置
     */
    private defaultConfig = {
      placeholder: '请输入内容...'
    };

    /**
     * @description 插入标签
     * @param value: 标签值
     * @param className: 标签的class
     */
    public insertTag(value: string, className?: string): void {
      const tagNode = {
        type: 'tag',
        value: value,
        className: className || "",
        children: [{ text: '' }]
      }
      const editor = this.editor;
      if (editor) {
        editor.restoreSelection(); // 恢复选区
        editor.insertNode(tagNode); // 插入 tag
        editor.move(1); // 移动光标
      }
    }


    /**
     * @description 插入html，在光标处插入
     * @params html: 需要插入的html
     * @returns void
     */
    public insertHtml(html: string): void {
      this.editor.dangerouslyInsertHtml(html);
    }

    @Watch("value")
    private watchValue(html: string) {
      this.html = html;
    }

    /**
     * @description 编辑器change事件
     */
    private __onChange (editor): void {
      this.$emit("input", this.html);
      this.$emit("on-change", editor);
    }

    /**
     * @description 富文本编辑器创建触发事件
     * @param editor: 编辑器实例
     */
    private __onEditorCreated(editor): void {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      const exportFn = {
        insertHtml: this.insertHtml,
        insertTag: this.insertTag
      };
      let oEditor = Object.assign({}, this.editor, exportFn);
      this.$emit("on-editor-created", Object.seal(oEditor));
    }

    private created() {
      if (this.value) {
        this.html = this.value;
      }
    }
  }
</script>

<style lang="scss">
  //修改全屏窗口不能覆盖导航层
  .w-e-full-screen-container {
    z-index: 9999;
  }

</style>
